import React, { Component } from 'react'
export default class Count extends Component {

  changeCount = (type) => {
    const { increment, decrement, incrementAsync } = this.props
    return () => {
      if (type === 'incrementIfOdd') {
        if (this.props.count % 2 !== 0) {
          increment(this.select.value * 1)
        }
      } else if (type === 'incrementAsync') {
        incrementAsync(this.select.value * 1)
      } else if (type === 'increment') {
        increment(this.select.value * 1)

      } else if (type === 'decrement') {
        decrement(this.select.value * 1)

      }


    }
  }
  render() {
    console.log(this.props)
    return (
      <div>
        <h2>当前计数:{this.props.count}</h2>
        <select ref={c => this.select = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.changeCount('increment')}>+</button>&nbsp;
        <button onClick={this.changeCount('decrement')}>-</button>&nbsp;
        <button onClick={this.changeCount('incrementIfOdd')}>计数再加</button>&nbsp;
        <button onClick={this.changeCount('incrementAsync')}>异步相加</button>&nbsp;
      </div>
    )
  }
}
